import { ScreenEnum, SizeEnum } from "@/config";
import { Ref, ref } from "vue";
import useEvent from "./useEvent";

type screenBreakPointCb = (screen: SizeEnum,width:number) => void;

//页面尺寸hooks
export default function useScreen() {
  const screenRef: Ref<SizeEnum> = ref(SizeEnum.XL);

  function createbreakPointEvent(fn?: screenBreakPointCb) {
    function screenBreakPoint() {
      const width = window.innerWidth;
      //判断页面可视区域宽度尺寸
      if (width < ScreenEnum.XS) {
        screenRef.value = SizeEnum.XS;
      } else if (width < ScreenEnum.SM) {
        screenRef.value = SizeEnum.SM;
      } else if (width < ScreenEnum.MD) {
        screenRef.value = SizeEnum.MD;
      } else if (width < ScreenEnum.LG) {
        screenRef.value = SizeEnum.LG;
      } else if (width < ScreenEnum.XL) {
        screenRef.value = SizeEnum.XL;
      } else {
        screenRef.value = SizeEnum.XXL;
      }

      fn?.(screenRef.value,width);
    }

    return useEvent({
      el: window,
      name: "resize",
      listener: () => {
        screenBreakPoint();
      },
    });
  }

  return {
    createbreakPointEvent,
  };
}
